<template>
  <div class="china-map">
    <!-- tab切换实现 -->
   <div class="map-info">
      <Tabs :currentIndex="currentIndex" @changeTab="changeTab">
      <Tab label="中国疫情" index="1">
        <div
          id="main"
          style="width: 320px; height: 380px; margin: 0 auto"
        ></div>
      </Tab>
      <Tab label="世界疫情" index="2">
        <div
          id="main2"
          style="width: 320px; height: 380px; margin: 0 auto"
        ></div>
      </Tab>
    </Tabs>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
    };
  },
  methods: {
    changeTab(val) {
      this.currentIndex = val;
    },
  },
  mounted() {
    // this.$chart.chinaMap('main')
    //获取数据--
    this.$api.chinaMap().then((res) => {
      //处理数据--- data=[{name:'',value:''},{}]
      let arr = res.data.retdata;
      let cityData = [];
      for (let i = 0; i < arr.length; i++) {
        let temp = {};
        temp.name = arr[i].xArea;
        temp.value = arr[i].curConfirm;
        cityData.push(temp);
      }
      this.$chart.chinaMap("main", cityData);
    });

    //获取数据---------------------
    this.$api.GuowaiData().then((res) => {
      //   console.log(res.data.retdata);
      let arr = res.data.retdata;
      let cityData = [];
      for (let i = 0; i < arr.length; i++) {
        let temp = {};
        temp.name = arr[i].xArea;
        temp.value = arr[i].curConfirm;
        cityData.push(temp);
      }
      this.$chart.GuoWaiMap("main2", cityData);
    });
  },
};
</script>

<style lang="less" scoped>
.china-map {
  border-top:1px solid #eee;
  padding-top: 0.2rem;
}
.map-info{
   background: #f5f5f5;
}
</style>